import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, Radio, Icon ,Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,Rate,Tag,Alert} from 'antd';

class App extends Component {


render() {

    const { Option } = Select;

    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 5 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
        },
    };

    const onClose = (e) => {
        console.log(e, 'I was closed.');
    };

    return (
      <div className="App">
{/*        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>*/}
        <Button type="primary">Button</Button>
        <Button type="default">Button</Button>
        <Button type="dashed">Button</Button>
        <Button type="danger">Button</Button>
        <Button type="primary" disabled>Primary(disabled)</Button>

        <div>
          <Rate className="xingxing" allowHalf defaultValue={2.5} />
        </div>

        <Alert message="Success Tips" type="success" showIcon closable  onClose={onClose}/>
        <Alert message="Informational Notes" type="info" showIcon closable  onClose={onClose} />
        <Alert message="Warning" type="warning" showIcon closable  onClose={onClose} />
        <Alert message="Error" type="error" showIcon closable  onClose={onClose} />

        <div>
          <Alert message="Success Text" type="success" />
          <Alert message="Info Text" type="info" />
          <Alert message="Warning Text" type="warning" />
          <Alert message="Error Text" type="error" />
        </div>

        <div>
          <h4 style={{ marginBottom: 16 }}>Presets:</h4>
          <div>
            <Tag color="magenta">magenta</Tag>
            <Tag color="red">red</Tag>
            <Tag color="volcano">volcano</Tag>
            <Tag color="orange">orange</Tag>
            <Tag color="gold">gold</Tag>
            <Tag color="lime">lime</Tag>
            <Tag color="green">green</Tag>
            <Tag color="cyan">cyan</Tag>
            <Tag color="blue">blue</Tag>
            <Tag color="geekblue">geekblue</Tag>
            <Tag color="purple">purple</Tag>
          </div>
          <h4 style={{ margin: '16px 0' }}>Custom:</h4>
          <div>
            <Tag color="#f50">#f50</Tag>
            <Tag color="#2db7f5">#2db7f5</Tag>
            <Tag color="#87d068">#87d068</Tag>
            <Tag color="#108ee9">#108ee9</Tag>
          </div>
        </div>

        <div className="icons-list">
          <Icon type="home" />
          <Icon type="setting" theme="filled" />
          <Icon type="smile" theme="outlined" />
          <Icon type="sync" spin />
          <Icon type="loading" />
        </div>

        <div className="icons-list">
          <Icon type="smile" theme="twoTone" />
          <Icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />
          <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
        </div>

        <Icon className="myicon" type="pic-right" />

        <Form>
          <Form.Item
              {...formItemLayout}
              label="Fail"
              validateStatus="error"
              help="Should be combination of numbers & alphabets"
          >
            <Input placeholder="unavailable choice" id="error" />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Warning"
              validateStatus="warning"
          >
            <Input placeholder="Warning" id="warning" />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Validating"
              hasFeedback
              validateStatus="validating"
              help="The information is being validated..."
          >
            <Input placeholder="I'm the content is being validated" id="validating" />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Success"
              hasFeedback
              validateStatus="success"
          >
            <Input placeholder="I'm the content" id="success" />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Warning"
              hasFeedback
              validateStatus="warning"
          >
            <Input placeholder="Warning" id="warning" />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Fail"
              hasFeedback
              validateStatus="error"
              help="Should be combination of numbers & alphabets"
          >
            <Input placeholder="unavailable choice" id="error" />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Success"
              hasFeedback
              validateStatus="success"
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Warning"
              hasFeedback
              validateStatus="warning"
          >
            <TimePicker style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Error"
              hasFeedback
              validateStatus="error"
          >
            <Select defaultValue="1">
              <Option value="1">Option 1</Option>
              <Option value="2">Option 2</Option>
              <Option value="3">Option 3</Option>
            </Select>
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Validating"
              hasFeedback
              validateStatus="validating"
              help="The information is being validated..."
          >
            <Cascader defaultValue={['1']} options={[]} />
          </Form.Item>

          <Form.Item
              label="inline"
              {...formItemLayout}
              style={{ marginBottom: 0 }}
          >
            <Form.Item
                validateStatus="error"
                help="Please select the correct date"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <DatePicker />
            </Form.Item>
            <span style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>
        -
      </span>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
              <DatePicker />
            </Form.Item>
          </Form.Item>

          <Form.Item
              {...formItemLayout}
              label="Success"
              hasFeedback
              validateStatus="success"
          >
            <InputNumber style={{ width: '100%' }} />
          </Form.Item>
        </Form>

      </div>
    );
  }
}

export default App;
